<template>
  <ion-page>
    <ion-content :fullscreen="true">
      <div style="height: 100vh" class="d-f f-d-c ion-align-items-center ion-justify-content-center">
        <img src="../../public/assets/images/13.svg"/>
        <ion-row class="border_bottom" style="margin-top: 100px">
          <ion-col class="d-f ion-align-items-center">
            <ion-icon :icon="personOutline"></ion-icon>
            <ion-input class="ion-margin-start" placeholder="请输入帐号" v-model="form.username"></ion-input>
          </ion-col>
        </ion-row>
        <ion-row class="border_bottom">
          <ion-col class="d-f ion-align-items-center">
            <ion-icon :icon="lockClosedOutline"></ion-icon>
            <ion-input type="password" class="ion-margin-start" placeholder="请输入密码" v-model="form.password"></ion-input>
          </ion-col>
        </ion-row>
        <ion-row class="ion-padding" style="width: 75%">
          <ion-col>
            <ion-button @click="doLogin" expand="block">登录</ion-button>
          </ion-col>
        </ion-row>
      </div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {postAction} from '@/api/manage';
import {defineComponent, inject} from 'vue';
import { useRouter } from 'vue-router';
import { Storage } from '@ionic/storage';
import {
  IonHeader,
  IonToolbar,
  IonTitle,
  IonInput,
  IonPage,
  IonCard,
  IonItem,
  IonIcon,
  IonButton,
  IonCardContent,
  IonContent,
  IonSearchbar,
  IonCardHeader,
  IonRow,
  IonCol,
  IonSegment,
  IonSegmentButton,
  IonLabel,
  IonAvatar,
  IonImg,
  IonBackButton,
  IonButtons,
  IonListHeader,
  IonChip,
  useIonRouter,
  toastController
} from '@ionic/vue';
import {callOutline, reorderFourOutline, lockClosedOutline, personOutline} from 'ionicons/icons';
import app from "@/main";
export default defineComponent({
  name: 'LoginPage',
  components: {
    IonHeader,
    IonToolbar,
    IonTitle,
    IonInput,
    IonPage,
    IonCard,
    IonItem,
    IonIcon,
    IonButton,
    IonCardContent,
    IonContent,
    IonSearchbar,
    IonCardHeader,
    IonRow,
    IonCol,
    IonSegment,
    IonSegmentButton,
    IonLabel,
    IonAvatar,
    IonImg,
    IonBackButton,
    IonButtons,
    IonListHeader,
    IonChip,
  },
  data() {
    return {
      form:{
        username:'',
        password:''
      }
    }
  },
  setup() {
    const router = useRouter();
    const ionRouter = useIonRouter();
    const reload:any = inject('reload')
    return {
      lockClosedOutline,
      callOutline,
      reorderFourOutline,
      personOutline,
      router,
      ionRouter,
      reload
    }
  },
  methods:{
    async openToast(str:string) {
      const toast = await toastController
        .create({
          message: str,
          duration: 2000
        })
      return toast.present();
    },
    async doLogin(){
      if(this.form.username===''){
        this.openToast('用户名不能为空')
        return;
      }
      if(this.form.password===''){
        this.openToast('密码不能为空')
        return;
      }
      const storage = new Storage();
      await storage.create();
      let resp:any= {};
      await postAction('user/login', {username:this.form.username,password:this.form.password}).then((res) => {
        resp=res;
        app.config.globalProperties.$currentUser=res.data.user;
      });
      if(resp.data.message==='失败'){
        this.openToast('用户名或密码错误')
      }else{
        await storage.set('username', this.form.username);
        await storage.set('password', this.form.password);
        this.$router.back()
        this.reload.call();
      }
    }
  }
});
</script>

<style scoped>
.border_bottom {
  position: relative;
}

.border_bottom:after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  border-bottom: 1px solid #fff;
  -webkit-transform: scaleY(.1);
  -webkit-transform-origin: 0 0;
}
ion-content{
  --background: url(../../public/assets/images/login_bgimg.jpg);
}
ion-input{
  --placeholder-color:#fff;
  --color:#fff;
}
ion-icon {
  color: #fff;
}
</style>
